import React, { useEffect, useState, useRef } from 'react';

import { request, history, useDispatch, useSelector } from 'umi';

import styles from './index.less';

import { IuserUser, IuserIdenttiy, IuserApi_authority, IuserIdentity_api_authority_relation, IuserView_authority, IuserIdentity_view_authority_relation } from '../../../utils/interface'

import { Button, Radio, Input, Menu, Dropdown, message, Space, Tooltip, Form, Select } from 'antd';
import { DownOutlined, UserOutlined, PoweroffOutlined } from '@ant-design/icons';
const { Option } = Select;


const AddUser: React.FC = (props) => {
  const dispatch = useDispatch();
  const { userUser, userIdenttiy, userApi_authority, userView_authority} = useSelector((state: any) => state.user);
  const [form] = Form.useForm();
  useEffect(() => {
    // 展示用户数据
    dispatch({
      type: 'user/getUserShowUserUsers'
    });
    // 展示身份数据
    dispatch({
      type: 'user/getUserIdentitys'
    });
    // 展示api接口权限数据
    dispatch({
      type: 'user/getApi_authoritys'
    });
    // 展示身份和api权限关系
    dispatch({
      type: 'user/getIdentity_api_authority_relations'
    });
    // 获取视图权限数据
    dispatch({
      type: 'user/getView_authoritys'
    });
    // 给身份设定视图权限
    dispatch({
      type: 'user/getIdentity_view_authority_relations'
    });
  }, []);


  const [flag, setFlag] = useState(false);
  // 添加用户
  const [loadings, setLoadings] = useState(false);
  const [loadingss, setLoadingss] = useState(false);
  const [username, setusername] = useState('');
  const [userpwd, setuserpwd] = useState('');
  const [yhm, setyhm] = useState('');

  // 添加身份
  const [identity_text, setIdentity_text] = useState(false);
  const [addidentity_text, setaddIdentity_text] = useState('');
  // 添加api接口权限
  const [api_authority_text, setapi_authority_text] = useState(false);
  const [addapi_authority_text, setaddapi_authority_text] = useState('');
  const [addapi_authority_url, setaddapi_authority_url] = useState('');
  const [addapi_authority_method, setaddapi_authority_method] = useState('');
  // 添加视图权限
  const [userView_authoritys, setuserView_authoritys] = useState(false);
  const [view_authority_texts, setview_authority_texts] = useState('');
  const [view_ids, setview_ids] = useState('');
  // 给身份设定api接口权限
  const [setIdentityApis, setsetIdentityApis] = useState(false);
  const [identity_ids, setidentity_ids] = useState('');
  const [api_authority_ids, setapi_authority_ids] = useState('');
  // 给身份设定视图权限
  const [setIdentityViews, setsetIdentityViews] = useState(false);
  const [view_authority_ids, setview_authority_ids] = useState('');


  const [size, setSize] = useState('large')
  const handleSizeChange = (e: string) => {
    if (e == 'large') { setSize('large'); setFlag(!flag) } else { setSize('default'); setFlag(!flag) };
  };


  const onReset = () => {
    form.resetFields();
  };

  return <div className={styles.user_add}>
    <h2 className={styles.h2}>添加用户</h2>
    <div className={styles.addUser_list}>
      <div>
        <div className={styles.addUser_wrapper__3qQDv}>
          <Radio.Group value={size} onChange={(e) => { handleSizeChange(e.target.value) }}>
            <Radio.Button value="large">添加用户</Radio.Button>
            <Radio.Button value="default">更新用户</Radio.Button>
          </Radio.Group>
          <div>
            {
              !flag ?
                <>
                  <Form form={form}>
                    <Form.Item name="notez" rules={[{ required: true }]}>
                      <Input placeholder="请输入用户名" style={{ margin: '20px 0 0px' }} onChange={(e) => { setusername(e.target.value) }} />
                    </Form.Item>
                    <Form.Item name="notex" rules={[{ required: true }]}>
                      <Input placeholder="请输入密码" onChange={(e) => { setuserpwd(e.target.value) }} />
                    </Form.Item>
                    <Form.Item name='notec' rules={[{ required: true }]} style={{ margin: '20px 0', width: '150px' }}>
                      <Select
                        placeholder="请选择身份id"
                        onChange={(value: number) => {
                          console.log(value, userIdenttiy[value]);
                          setidentity_ids(userIdenttiy[value].identity_id);
                        }}
                        allowClear
                      >
                        {
                          userIdenttiy.map((i: IuserIdenttiy, index: number) => {
                            return <Option value={index} key={index}>
                              {i.identity_text}
                            </Option>
                          })
                        }
                      </Select>
                    </Form.Item>
                    <Form.Item>
                      <Button
                        type="primary"
                        loading={loadingss}
                        onClick={() => {
                          console.log(username, userpwd, identity_ids);
                          let data = {
                            user_name: username,
                            user_pwd: userpwd,
                            identity_id: identity_ids
                          }
                          dispatch({ type: 'user/setusers', payload: { data } });
                          setLoadingss(true);
                          dispatch({
                            type: 'user/getUserShowUserUsers'
                          })
                          setTimeout(() => {
                            setLoadingss(false);
                          }, 500);
                        }}
                        style={{ margin: '0 10px 0px 0', width: '111.84px' }}
                      >确定</Button>
                      <Button htmlType="button" onClick={onReset}  >重置</Button>
                    </Form.Item>
                  </Form>
                </> :
                <>
                  <Form form={form}>
                    <Form.Item name='notem' rules={[{ required: true }]} style={{ margin: '20px 0 10px', width: '150px' }}>
                      <Select
                        placeholder="请选择用户名"
                        onChange={(value: number) => {
                          console.log(value, userUser[value]);
                          setyhm(userUser[value].user_id);
                        }}
                        allowClear
                      >
                        {
                          userUser.map((i: IuserUser, index: number) => {
                            return <Option value={index} key={index}>
                              {i.user_name}
                            </Option>
                          })
                        }
                      </Select>
                    </Form.Item>
                    <Form.Item name="noteb" rules={[{ required: true }]}>
                      <Input placeholder="请输入用户名" style={{ margin: '10px 0 0' }} onChange={(e) => { setusername(e.target.value) }} />
                    </Form.Item>
                    <Form.Item name="notex" rules={[{ required: true }]}>
                      <Input placeholder="请输入密码" style={{ margin: '-5px 0 0' }} onChange={(e) => { setuserpwd(e.target.value) }} />
                    </Form.Item>
                    <Form.Item name='noten' rules={[{ required: true }]} style={{ margin: '20px 0', width: '150px' }}>
                      <Select
                        placeholder="请选择身份id"
                        onChange={(value: number) => {
                          console.log(value, userIdenttiy[value]);
                          setidentity_ids(userIdenttiy[value].identity_id);
                        }}
                        allowClear
                      >
                        {
                          userIdenttiy.map((i: IuserIdenttiy, index: number) => {
                            return <Option value={index} key={index}>
                              {i.identity_text}
                            </Option>
                          })
                        }
                      </Select>
                    </Form.Item>
                    <Form.Item>
                      <Button
                        type="primary"
                        // icon={< />}
                        loading={loadings}
                        onClick={() => {
                          console.log(yhm, username, userpwd, identity_ids);
                          let data = {
                            user_id: yhm,
                            user_name: username,
                            user_pwd: userpwd,
                            identity_id: identity_ids
                          }
                          dispatch({ type: 'user/setuserusers', payload: data });
                          setLoadings(true);
                          dispatch({
                            type: 'user/getUserShowUserUsers'
                          });
                          setTimeout(() => {
                            setLoadings(false);
                          }, 500);
                        }}
                        style={{ margin: '0 10px 0px 0', width: '111.84px' }}
                      >确定</Button>
                      <Button htmlType="button" onClick={onReset}>重置</Button>
                    </Form.Item>
                  </Form>
                </>
            }
          </div>
        </div>
        <div className={styles.addUser_wrapper__4qQDv}>
          <Radio.Group value='large'>
            <Radio.Button value="large">添加身份</Radio.Button>
          </Radio.Group>
          <Form form={form}>
            <Form.Item name="note" rules={[{ required: true }]}>
              <Input placeholder="请输入身份名称" style={{ margin: '20px 0 0px ' }} onChange={(e) => { setaddIdentity_text(e.target.value) }} />
            </Form.Item>
            <Form.Item >
              <Button
                type="primary"
                // icon={<PoweroffOutlined />}
                loading={identity_text}
                onClick={() => {
                  console.log(addidentity_text);
                  dispatch({ type: 'user/setIdentitys', payload: { identity_text: addidentity_text } });
                  setIdentity_text(true);

                  setTimeout(() => {
                    setIdentity_text(false);
                  }, 500);
                  history.go(0);
                }}
                style={{ margin: '0px 10px 0 0', width: '111.84px' }}
              >
                确定
        </Button>
              <Button htmlType="button" onClick={onReset} style={{ margin: '0px 10px 0 0' }}>重置</Button></Form.Item>
          </Form>
        </div>
        <div className={styles.addUser_wrapper__5qQDv}>
          <Radio.Group value='large'>
            <Radio.Button value="large">添加api接口权限</Radio.Button>
          </Radio.Group>
          <Form form={form}>
            <Form.Item name="notes" rules={[{ required: true }]}>
              <Input placeholder="请输入api接口权限名称" style={{ margin: '20px 0 0px' }} onChange={(e) => { setaddapi_authority_text(e.target.value) }} />
            </Form.Item>
            <Form.Item name="noteq" rules={[{ required: true }]}>
              <Input placeholder="请输入api接口权限url" onChange={(e) => { setaddapi_authority_url(e.target.value) }} />
            </Form.Item>
            <Form.Item name="notea" rules={[{ required: true }]}>
              <Input placeholder="请输入api接口权限方法" onChange={(e) => { setaddapi_authority_method(e.target.value) }} />
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                // icon={<PoweroffOutlined />}
                loading={api_authority_text}
                onClick={() => {
                  console.log(addapi_authority_text, addapi_authority_url, addapi_authority_method);
                  let data = {
                    api_authority_text: addapi_authority_text,
                    api_authority_url: addapi_authority_url,
                    api_authority_method: addapi_authority_method
                  }
                  dispatch({ type: 'user/setAuthorityApis', payload: data });
                  setapi_authority_text(true);
                  setTimeout(() => {
                    setapi_authority_text(false);
                  }, 500);
                  history.go(0);
                }}
                style={{ margin: '0px 10px 0 0', width: '111.84px' }}
              >
                确定
        </Button>
              <Button htmlType="button" onClick={onReset} style={{ margin: '0px 10px 0 0' }}>重置</Button></Form.Item>
          </Form>
        </div>
      </div>
      <div>
        <div className={styles.addUser_wrapper__3qQDv}>
          <Radio.Group value='large'>
            <Radio.Button value="large">添加视图接口权限</Radio.Button>
          </Radio.Group><br />
          <Form form={form}>
            <Form.Item name='notee' rules={[{ required: true }]} style={{ margin: '20px 0 10px', width: '150px' }}>
              <Select
                placeholder="选择已有视图"
                onChange={(value: number) => {
                  console.log(value, userView_authority[value]);
                  setview_authority_texts(userView_authority[value].view_authority_text);
                  setview_ids(userView_authority[value].view_id);
                }}
                allowClear
              >
                {
                  userView_authority.map((i: IuserView_authority, index: number) => {
                    return <Option value={index} key={index}>
                      {i.view_authority_text}
                    </Option>
                  })
                }

              </Select>
            </Form.Item>
            <Form.Item name="notes" rules={[{ required: true }]}>
              <Button
                type="primary"
                // icon={<PoweroffOutlined />}
                loading={userView_authoritys}
                onClick={() => {
                  console.log(view_authority_texts, view_ids);
                  let data = {
                    view_authority_text: view_authority_texts,
                    view_id: view_ids
                  }
                  dispatch({ type: 'user/setauthorityViews', payload: data });
                  setuserView_authoritys(true);
                  setTimeout(() => {
                    setuserView_authoritys(false);
                  }, 500);
                  history.go(0);
                }}
                style={{ margin: '10px 10px 0 0', width: '111.84px' }}
              >
                确定
        </Button>
              <Button style={{ margin: '10px 10px 0 0' }} htmlType="button" onClick={onReset}>重置</Button></Form.Item>
          </Form>
        </div>
        <div className={styles.addUser_wrapper__4qQDv}>
          <Radio.Group value='large'>
            <Radio.Button value="large">给身份设置api权限</Radio.Button>
          </Radio.Group><br />
          <Form form={form}>
            <Form.Item name='noter' rules={[{ required: true }]} style={{ margin: '20px 0 20px', width: '150px' }}>
              <Select
                placeholder="请选择身份id"
                onChange={(value: string) => {
                  console.log(userIdenttiy[value]);
                  setidentity_ids(userIdenttiy[value].identity_id);
                }}
                allowClear

              >
                {
                  userIdenttiy.map((i: IuserIdenttiy, index: number) => {
                    return <Option value={index} key={index}>
                      {i.identity_text}
                    </Option>
                  })
                }

              </Select>
            </Form.Item>
            <Form.Item name='notet' rules={[{ required: true }]} style={{ margin: '0 0 20px', width: '150px' }}>
              <Select
                placeholder="请选择api接口权... "
                onChange={(value: string) => {
                  console.log(userApi_authority[value]);
                  setapi_authority_ids(userApi_authority[value].api_authority_id);
                }}
                allowClear
              >
                {
                  userApi_authority.map((i: IuserApi_authority, index: number) => {
                    return <Option value={index} key={index}>
                      {i.api_authority_text}
                    </Option>
                  })
                }

              </Select>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                // icon={<PoweroffOutlined />}
                loading={setIdentityApis}
                onClick={() => {
                  console.log(identity_ids, api_authority_ids);
                  let data = {
                    identity_id: identity_ids,
                    api_authority_id: api_authority_ids
                  }
                  dispatch({ type: 'user/setsetIdentityApis', payload: data });
                  setsetIdentityApis(true);
                  setTimeout(() => {
                    setsetIdentityApis(false);
                  }, 500);
                  history.go(0);
                }}
                style={{ margin: '0 10px 0 0', width: '111.84px' }}
              >
                确定
        </Button>
              <Button style={{ margin: '0px 10px 0 0' }} htmlType="button" onClick={onReset}>重置</Button></Form.Item>
          </Form>
        </div>
        <div className={styles.addUser_wrapper__5qQDv}>
          <Radio.Group value='large'>
            <Radio.Button value="large">给身份设置视图权限</Radio.Button>
          </Radio.Group><br />
          <Form form={form}>
            <Form.Item name='notey' rules={[{ required: true }]} style={{ margin: '20px 0 10px 0', width: '150px' }}>
              <Select
                placeholder="请选择身份id "
                onChange={(value: string) => {
                  console.log(userIdenttiy[value]);
                  setidentity_ids(userIdenttiy[value].identity_id);
                }}
                allowClear

              >
                {
                  userIdenttiy.map((i: IuserIdenttiy, index: number) => {
                    return <Option value={index} key={index}>
                      {i.identity_text}
                    </Option>
                  })
                }

              </Select>
            </Form.Item>
            <Form.Item name='noteu' rules={[{ required: true }]} style={{ margin: '20px 0 -5px 0', width: '150px' }}>
              <Select
                placeholder="请选择视图权限id "
                onChange={(value: string) => {
                  console.log(userView_authority[value]);
                  setview_authority_ids(userView_authority[value].view_authority_id);
                }}
                allowClear

              >
                {
                  userView_authority.map((i: IuserIdentity_view_authority_relation, index: number) => {
                    return <Option value={index} key={index}>
                      {i.view_authority_text}
                    </Option>
                  })
                }

              </Select>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                // icon={<PoweroffOutlined />}
                loading={setIdentityViews}
                onClick={() => {
                  console.log(identity_ids, view_authority_ids);
                  let data = {
                    identity_id: identity_ids,
                    view_authority_id: view_authority_ids
                  }
                  dispatch({ type: 'user/setsetIdentityViews', payload: data });
                  setsetIdentityViews(true);
                  setTimeout(() => {
                    setsetIdentityViews(false);
                  }, 500);
                  history.go(0);
                }}
                style={{ margin: '25px 10px 20px 0', width: '111.84px' }}
              >
                确定
        </Button>
              <Button htmlType="button" onClick={onReset}>重置</Button></Form.Item>
          </Form>
        </div>
      </div>
    </div>
  </div>
};

export default AddUser;